import { useState, useEffect, useCallback } from 'react';
import { Link } from "react-router-dom";
import { useSelector } from 'react-redux';
import { Layout, Menu } from 'antd';
import { matchPath, useLocation } from 'react-router';
import Style from './index.less';
import { ItemType } from 'antd/es/menu/hooks/useItems';
import Icon from '@ant-design/icons';
import { menuArrows, menuArrows2 } from '../icon';
const { Sider } = Layout;
function SiderMenu(props: any) {
    const permissions = useSelector((state: { common: initStateType }) => state.common.permissions);
    const commonMenuData = useSelector((state: { common: any }) => state.common.sideMenu);
    const [collapsed, setCollapsed] = useState(false)
    const [menuData, setMenuData] = useState(commonMenuData);
    const [selectedKeys, setSelectedKeys] = useState<string[] | undefined>([]);
    const [parentSelectedKeys, setParentSelectedKeys] = useState<string[] | undefined>([]);
    const location = useLocation()
    const [hover, setHover] = useState(false)
    //选中设置
    const setMenuOpenStatus = useCallback(() => {
        const routePath = location.pathname;
        let parentKeys: string[] = [];
        const selectedKey: string[] = []

        function matchSiderNav(data: SideMenuItem[], isOuter = false) {
            for (let i = 0; i < data.length; i++) {
                isOuter && (parentKeys = []);

                const { title, path, children } = data[i];
                let routeItem = undefined
                if (path) {
                    routeItem = matchPath(routePath, path);
                }
                if (children && children.length) {
                    parentKeys.push(title)
                    matchSiderNav(children)
                } else if (routeItem) {
                    parentKeys.push(title)
                    selectedKey.push(title);
                    setParentSelectedKeys(parentKeys);
                    setSelectedKeys(selectedKey);
                } else {
                    if (i + 1 === data.length) {
                        parentKeys.pop();
                    }
                }
            }
        }
        if (commonMenuData) {
            matchSiderNav(commonMenuData, true);
        }
    }, [location.pathname, commonMenuData])

    //权限
    function permissionStatus(permission: string | undefined) {
        for (let i in permissions) {
            if (permission == permissions[i].permissionKey) {
                return true
            }
        }
        return false
    }
    useEffect(() => {
        setMenuOpenStatus()
    }, [location, setMenuOpenStatus]);
    // 菜单
    useEffect(() => {
        setMenuData(commonMenuData);
        setMenuOpenStatus();
    }, [commonMenuData, setMenuOpenStatus]);

    //开关
    useEffect(() => {
        if (!collapsed) {
            setMenuOpenStatus();
        } else {
            setParentSelectedKeys([]);
        }
    }, [collapsed, setMenuOpenStatus]);

    //SubMenu 展开/关闭赋值
    function unfoldMenuHandle(parentSelectedKeys: string[]) {
        setParentSelectedKeys(parentSelectedKeys);
    }

    //左侧菜单权限以及push初始化
    const renderMenu = (menus: SideMenuItemList = []) => {
        let items: ItemType[] = []
        menus.map((menu) => {
            if (permissionStatus(menu.permission) || !menu.permission) {
                //有子级
                if (menu.children && menu.children.length) {
                    items.push(
                        {
                            key: menu.title,
                            icon: menu.icon,
                            label: menu.title,
                            children: renderMenu(menu.children),
                        })
                } else {
                    //到最底层
                    if (!(props.lotteryFlag === 1)) {
                        let to = menu.path
                        items.push({
                            key: menu.title,
                            icon: menu.icon,
                            label: to ? <Link target={menu.target} to={to} >
                                {menu.title}
                            </Link> : menu.title,
                            onClick: menu.onClick
                        })
                    }
                }
            }
        })
        return items
    }
    return (
        <Sider
            collapsible collapsed={collapsed}
            trigger={null}
            theme={props.theme}
            className={Style.Sider}
        >
            <div
                onMouseEnter={() => setHover(true)}
                onMouseLeave={() => { setHover(false) }}
                className={Style.collapsedIcon} style={{ transform: `rotate(${collapsed ? '180deg' : 0})` }} onClick={() => setCollapsed(!collapsed)}>
                <Icon component={hover ? menuArrows2 : menuArrows} size={24} />
            </div>
            <Menu
                mode="inline"
                theme={props.theme}
                openKeys={parentSelectedKeys}
                selectedKeys={selectedKeys}
                className={props.theme == 'light' ? Style.MenuWrap : ''}
                onSelect={({ key }) => {
                    setSelectedKeys([key]);
                }}
                onOpenChange={unfoldMenuHandle}
                items={renderMenu(menuData)}
            >
            </Menu>
        </Sider>
    )

}

export default SiderMenu